<template>
  <div class="item">
    <div  class="title">
      <span style="font-size: 25px; font-weight: bold; color: #fb6"
      >水费管理</span
    >
    <el-divider></el-divider>
      <el-button type="primary" @click="dialogVisible = true">点我增加水费用户</el-button>
    </div>
    <ExpenseInformation/>
    <el-dialog
  title="增加水费用户"
  :visible.sync="dialogVisible"
  width="30%"
  >
  <el-form ref="form" :model="form" label-width="80px">
    <!-- <el-form-item label="用户id">
    <el-input v-model="form.id"></el-input>
  </el-form-item> -->
  <el-form-item label="房屋编号">
    <el-select v-model="form.houseNum" clearable filterable placeholder="请选择" @change="sethouseNum()">
      <el-option
          v-for="item in AllHouse"
          :key="item.id"
          :value="item.houseNum">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item  label="业主名">
    <el-input v-model="form.ownname" disabled></el-input>
  </el-form-item>
  <el-form-item  label="业主电话">
    <el-input v-model="form.count" disabled></el-input>
  </el-form-item>
  <el-form-item label="缴费时间">
    <el-col :span="11">
      <!-- <el-input v-model="form.date1" disabled></el-input> -->
      <el-date-picker type="date"  disabled placeholder="缴费日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="缴费金额">
    <el-input v-model="form.fee"></el-input>
  </el-form-item>
  <el-form-item label="缴费人">
    <el-input v-model="form.person"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="fun()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import ExpenseInformation from "@/components/fzy/water/ExpenseInformation.vue";
import { addwater,findWaterAllHouse,findOwnerWaterByHouseId } from "@/apis/fzy/fzylink";
export default {
    components:{
    ExpenseInformation
  },
  data() {
      return {
        form: {
          id:"",
          name: '',
          ownname: '',
          date1: '',
          date2: '',
          person: '',
          count:'',
          fee:'',
          houseid:'',
          houseNum:''
        },
        dialogVisible: false,
        AllHouse:''
      }
    },
    methods: {
      fun(){

        console.log(this.form.id);
        console.log(this.form.date1);
        console.log(this.form.houseNum);
        console.log(this.form.person);
        console.log(this.form.fee);
        console.log(this.form.ownname);
        console.log(this.form.houseid);
        
        addwater(this.form.id,this.form.date1,this.form.houseNum,this.form.person,this.form.fee,this.form.ownname,this.form.houseid).then((ok)=>{
          console.log(ok);
        })
        this.$router.go(0)
        
        
        this.dialogVisible = false
      },
      sethouseNum(){
        console.log(this.form.houseNum);
        findOwnerWaterByHouseId(this.form.houseNum).then((ok)=>{
          console.log(ok);
          this.form.ownname=ok.data.data.ownName
          this.form.count=ok.data.data.ownPhone
          this.form.date1=ok.data.data.createTime
          this.form.date2=ok.data.data.updateTime
          this.form.id=ok.data.data.id
          this.form.houseid=ok.data.data.houseId
        })
      }
    },
    mounted(){
      // shoufei().then((ok)=>{
      //     console.log(ok.data);
      //     this.tableData=ok.data
      //   })
      findWaterAllHouse().then((ok)=>{
        console.log(ok);
        this.AllHouse=ok.data.data
        console.log(this.AllHouse);
      })
    }
    
      
}
</script>

<style scopd lang="scss">
.item{
    .title{
        font-size: 20px;
    }
}
</style>